<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>{$lang.add}|{$lang.edit}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<include file="common/ace-tag"/>
	</head>
	<link rel="stylesheet" href="/static/plugin/ace/css/chosen.css" />
	<script src="/static/plugin/ace/js/chosen.jquery.min.js"></script>
	<script src="/static/plugin/ace/js/jquery.autosize.min.js"></script>
	<script src="/static/plugin/ace/js/jquery.inputlimiter.1.3.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/plugin/webuploader/webuploader.css">
	<link rel="stylesheet" type="text/css" href="/static/plugin/webuploader/style.css">
	<script type="text/javascript" src="/static/plugin/webuploader/webuploader.js"></script>
	<style>
		body{
			background-color:#fff
		}
		.yui_right{
			float: right;
			margin-bottom: 10px;
		}
		#content {
			width: 95%;
			height: 300px;
		}
	</style>
	<body >
	<div class="layui-form">
		<div class="widget-main">
			<input type="hidden" name="id" value="{$data.id}"/>

			<div>
				<label >{$lang_field.status}</label>
				<select class="form-control" name="status">
					<eq name="data.status|default=1" value="1">
						<option value="1" selected>{$lang_field.on}</option>
						<option value="2">{$lang_field.off}</option>
						<else/>
						<option value="2" selected>{$lang_field.off}</option>
						<option value="1">{$lang_field.on}</option>
					</eq>
				</select>
				<br>
			</div>

			<div style="margin-top: 10px">
				<label >{$lang_field['content']}</label>
				<textarea class="autosize-transition form-control" name="content">{$data.content}</textarea>
				<br>
			</div>

			<div>
				<div id="uploader-demo">
					<!--用来存放item-->
					<div id="fileList" class="uploader-list">
						<?php if(!empty($data['pic_urls'])) foreach(explode(';',$data['pic_urls']) as $v) { ?>
							<div class="file-item thumbnail">
								<img style="width: 100px;height: 100px" src="{$v}"/>
							</div>
						<?php } ?>
					</div>
					<div id="filePicker">{$lang.choosen_picker}</div>
				</div>
				<br>
			</div>

			<button class="btn btn-primary yui_right" id="save">
				<i class="icon-plus align-top bigger-125"></i>
				{$lang.save}
			</button>

		</div>
	</div>

	</body>
	<script>
		let havPic = false;
		$(function () {

            if("{$data.pic_urls}" != ''){
                havPic = true;
            }

            layui.use(['form'], function(){
            });

            initWebUploader();

            //新增
            $("#save").on('click' , function(){
                let form= new FormData();
                let id=$("input[name='id']").val();
                let content=$("textarea[name='content']").val();
                let status=$("select[name='status']").val();
                form.append('method','{$method}');
                form.append('id',id);
                form.append('status',status);
                form.append('content',content);
                let images=uploader.getFiles();
                for (let i=0;i<images.length;i++){
                    form.append('image['+i+']',images[i]['source']['source']);//file
                }
                let loading = layer.load(1, {
                    shade: [0.1,'#fff']
                });
				//ajax提交数据
                $.ajax({
                    url : '{$__url}',
                    type : 'POST',
                    dataType:"json",
                    data : form,
                    // 告诉jQuery不要去处理发送的数据
                    processData : false,
                    // 告诉jQuery不要去设置Content-Type请求头
                    contentType : false,
                    success : function(data) {
                        if (data['code']==1){
                            layer.open({
                                title: '{$lang.notice}',
                                content: '{$lang.op_success}'
                                ,yes: function(index, layero){
                                    //关闭本子页面 & 触发重新查询
                                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    let node = window.parent.document.getElementById("npe_search");
                                    node.click();
                                }
                            });
                        }else{
                            layer.msg(data['msg']);
                        }
                        layer.close(loading);
                    },
                    error : function(responseStr) {
                        console.log(responseStr);
                        layer.msg("{$lang.op_failed}",{time:1000});
                    }
                });
            });

        });

        /*
        * 初始化上传插件
        * */
        function initWebUploader() {
            let $ = jQuery,
                $list = $('#fileList'),
                // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

                // 缩略图大小
                thumbnailWidth = 100 * ratio,
                thumbnailHeight = 100 * ratio;
            // 初始化Web Uploader
            uploader = WebUploader.create({
                swf: '/static/plugin/webuploader/js/Uploader.swf',
                server: '',
                pick: '#filePicker',
                fileNumLimit: 12,
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });

            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                //已有图片处理
				if (havPic) {
                    $list.empty();
                    havPic = false;
				}

                let $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list.append( $li );
                // 创建缩略图
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
        }

	</script>

</html>
